<template>
  <el-container :style="{minWidth: 1500+'px',maxWidth:100+'%'}">
    <el-header>
      <logo/>
    </el-header>
   <el-main >
      <div class="indexLayout">
        <!-- <catalog/> -->
        <!-- <swiper/> -->
        <index-content/>
        <back-up/>
      </div>
    </el-main>
    <el-footer>
      <index-footer/>
    </el-footer>
  </el-container>
</template>


<script>
  import Logo from "../common/Logo.vue"
  import IndexContent from "./components/content.vue"
  import Swiper from "./components/Swiper.vue"
  import Catalog from "./components/catalog.vue"
  import TopRank from "./components/toprankcard.vue"
  import IndexFooter from "../common/footer.vue"
  import BackUp from "@/views/pc/common/backup.vue"


  export default{
    name:"index",
    components:{
      Logo,
      IndexContent,
      Swiper,
      Catalog,
      TopRank,
      IndexFooter,
      BackUp
    },
  }
</script>

<style scoped="scoped">
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .indexLayout{
    margin: 0 auto;
    width: var(--index_layout_width);
    /* overflow: hidden; */
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    padding: 0px;
  }


  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    height: auto;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>
